<template>
  <div id="centerRight1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="align-left" class="text-icon"></icon>
        </span>
        <div class="d-flex">
          <span class="text mx-2">大材、专工分队组统计</span>
        </div>
      </div>
      <div class="btn-group">
        <bottomRightBar />
      </div>
      <div class="d-flex jc-center body-box">
        <dv-scroll-board class="dv-scr-board" :config="config" />
      </div>
    </div>
  </div>
</template>

<script>
import bottomRightBar from "./components/bottom/bottomRightBar/index";
import { accessoryType } from "@/api/index";
export default {
  name: "bottomright",
  components: {
    bottomRightBar,
  },
  data() {
    return {
      config: {
        header: ["队组名称", "配件分类", "设备数量", "设备总数", "占比情况"],
        data: [],
        rowNum: 7, //表格行数
        headerHeight: 45,
        headerBGC: "#0f1325", //表头
        oddRowBGC: "#0f1325", //奇数行
        evenRowBGC: "#171c33", //偶数行
        // index: true,
        // columnWidth: [50],
        align: ["center", "center", "center", "center", "center"],
      },
    };
  },
  mounted() {
    // setInterval(() => {
    //   this.getData();
    // }, 3600000);
    this.getData();
  },
  methods: {
    getData() {
      let totalNum = 0;
      accessoryType().then((res) => {
        if (res.code == 200) {
          let data = [];
          res.data.forEach((item) => {
            totalNum += item.allNumber;
            if (item.accessoryType == 0) {
              data.push([
                item.ownedAssets,
                `<span style="color: #67c23a;">五小电器</span>`,
                item.allNumber,
                totalNum,
                parseFloat(
                  ((item.allNumber / totalNum) * 100 || 0.0).toFixed(2)
                ) + "%",
              ]);
            } else if (item.accessoryType == 1) {
              data.push([
                item.ownedAssets,
                `<span style="color: #409eff;">大材</span>`,
                item.allNumber,
                totalNum,
                parseFloat(
                  ((item.allNumber / totalNum) * 100 || 0.0).toFixed(2)
                ) + "%",
              ]);
            } else {
              data.push([
                item.ownedAssets,
                `<span style="color: #b2c038;">专工配件</span>`,
                item.allNumber,
                totalNum,
                parseFloat(
                  ((item.allNumber / totalNum) * 100 || 0.0).toFixed(2)
                ) + "%",
              ]);
            }
          });
          this.config.data = data;
          this.config = { ...this.config };
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
$box-height: 520px;
$box-width: 100%;
#centerRight1 {
  padding: 16px;
  padding-top: 20px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  margin-right: 120px;
  .bg-color-black {
    height: $box-height - 30px;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .body-box {
    border-radius: 10px;
    overflow: hidden;
  }
  .btn-group {
    position: absolute;
    margin: 2%;
    width: 30%;
    height: 200px;
    margin-top: 6%;
  }
}
::v-deep .dv-scr-board {
  margin: 5% 0 0 25%;
  width: 70%;
  height: 360px;
  .header {
    color: rgb(122, 182, 206);
    // font-size: 18px;
    font-weight: 700;
  }
  .rows {
    .row-item {
      color: rgb(122, 182, 206);
      // font-size: 17px;
      height: 42px;
      line-height: 42px;
    }
  }
}
.text-icon {
  background-color: #5cd9e8 !important;
}
</style>
